layui.use(['element', 'layer', 'util', 'form', 'table', 'tree'], function (exports) {
    var $ = layui.jquery
        , layer = layui.layer
        , element = layui.element //Tab的切换功能，切换事件监听等，需要依赖element模块
        , util = layui.util
        , table = layui.table
        , tree = layui.tree;
   //var baseUrl = 'https://entrywbzy4-vip.app.jtzny.com/';

    /**
     * 左树
     * @type {string}
     */


    resetelementheight();
    var mHeight, hheight;

    function resetelementheight() {
        mHeight = document.documentElement.clientHeight || document.body.clientHeight;

        if (mHeight > 600) {
            hheight = mHeight - 180;
            $("#leftTree").css({'max-height': hheight + 'px'});
        }
    }

    $(window).resize(function () {
        resetelementheight();
        // form.render();
    });
    var treeDataSearch;
    var URL = baseUrl + "maintainjudge/main/networkingdata/getroadinfo?froadname="
    var loading = layer.load(0, {
        shade: false,
        time: 2 * 1000
    });
    $.ajax({
        type: "GET",
        url: URL,
        dataType: "json",
        async: true,
        success: function (result) {
            if (result != null || result != undefined) {
                layer.close(loading);
                var treeData = result.map((item) => {
                    return {
                        title: item.froadname,//节点名称
                        id: item.froadcode
                    }
                })
                treeDataSearch = treeData;//赋值给搜索

                var clickDataID;
                var clickDataName;

                //无连接线风格左树
                tree.render({
                    elem: '#leftTree'
                    , data: treeData
                    , showLine: false  //是否开启连接线
                    , click: function (obj) {
                        //layer.msg(JSON.stringify(obj.data));
                        var loading = layer.load(0, {
                            shade: false,
                            time: 2 * 1000
                        });
                        //设置左树选中节点样式
                        $(obj.elem[0]).siblings().css("background-color", "transparent");
                        $(obj.elem[0]).css("background-color", "#12a9fd")
                        clickDataID = obj.data.id;
                        clickDataName = obj.data.title;
                        refreshRight(clickDataID, clickDataName);

                    }

                });
                //默认出发第一条数据

                $($('#leftTree .layui-tree-set')[0]).css("background-color", "#12a9fd");
                clickDataID = $($('#leftTree .layui-tree-set')[0])[0].dataset.id;
                clickDataName = $($('#leftTree .layui-tree-set')[0])[0].innerText;
                refreshRight(clickDataID, clickDataName);
            }

        },
        error: function (jqXHR) {
            alert("发生错误：" + jqXHR.status);
        }
    });

    function refreshRight(obj1, obj2) {
        refreshTable(obj1);
        //替换道路名称
        for (var i = 0; i < $('.roadName').length; i++) {
            $('.roadName b')[i].innerHTML = obj2;
        }
        refreshList(obj1);
    }

    /**
     *绘画表格1
     * @type {string}
     */

    function refreshTable(obj) {
        var tableHtml = '';
        var tableHtml2 = '';
        var tableHtml3 = '';

        $.ajax({
            type: "GET",
            url: baseUrl + 'maintainjudge/main/networkingdata/getmaintainandrailwaybyid?roadCode=' + obj,
            dataType: "json",
            async: true,
            success: function (result) {
                if (result != null || result != undefined) {
                    layer.close(loading);
                    tableHtml = '               <div class="table">\n' +
                        '                            <table class="table-list" border rules=none cellspacing=0>\n' +
                        '                                <tr>\n' +
                        '                                    <th>道路长度(m)</th>\n' +
                        '                                    <td></td>\n' +
                        '                                    <th>道路宽度(m)</th>\n' +
                        '                                    <td></td>\n' +
                        '                                    <th>检测面积(㎡)</th>\n' +
                        '                                    <td>' + result.daolupdzb_detectionarea + '</td>\n' +
                        '                                    <th></th>\n' +
                        '                                    <td></td>\n' +
                        '                                </tr>\n' +
                        '                                <tr>\n' +
                        '                                    <th>路段(个）</th>\n' +
                        '                                    <td>' + result.railwayNumber + '</td>\n' +
                        '                                    <th>合格(个）</th>\n' +
                        '                                    <td>' + result.daolupdzb_qualified + '</td>\n' +
                        '                                    <th>不合格(个)</th>\n' +
                        '                                    <td>' + result.daolupdzb_unqualified + '</td>\n' +
                        '                                    <th>合格率(%)</th>\n' +
                        '                                    <td>' + result.daolupdzb_qualified / result.daolupdzb_roadnumber + '</td>\n' +
                        '                                </tr>\n' +
                        '                                <tr>\n' +
                        '                                    <th>车行道完好率(%)</th>\n' +
                        '                                    <td>' + result.daolupdzb_maintainstatus + '</td>\n' +
                        '                                    <th>POL</th>\n' +
                        '                                    <td>' + result.daolupdzb_pql + '</td>\n' +
                        '                                    <th>道路等级</th>\n' +
                        '                                    <td>' + result.daolupdzb_roadgrade + '</td>\n' +
                        '                                    <th>养护建议</th>\n' +
                        '                                    <td>' + result.daolupdzb_maintenancesuggeste + '</td>\n' +
                        '                                </tr>\n' +
                        '                                <tr>\n' +
                        '                                    <th>巡检时间</th>\n' +
                        '                                    <td style="border: 0;">' + formateDate(result.daolupdzb_inspectiontime) + '</td>\n' +
                        '                                    <th>初评时间</th>\n' +
                        '                                    <td style="border: 0;">' + formateDate(result.daolupdzb_inspectiontime) + '</td>\n' +
                        '                                    <th></th>\n' +
                        '                                    <td style="border: 0;"></td>\n' +
                        '                                    <th></th>\n' +
                        '                                    <td style="border: 0;"></td>\n' +
                        '                                </tr>\n' +
                        '                            </table>\n' +
                        '                        </div>\n';

                    //车辙状况与评定
                    tableHtml2 = '                        <table class="table-list" border rules=none cellspacing=0>\n' +
                        '                            <tr>\n' +
                        '                                <th>道路长度(m)</th>\n' +
                        '                                <td style="border: 0"></td>\n' +
                        '                                <th>道路宽度(m)</th>\n' +
                        '                                <td style="border: 0"></td>\n' +
                        '                                <th>检测面积(㎡)</th>\n' +
                        '                                <td style="border: 0">' + result.daolupdzb_detectionarea + '</td>\n' +
                        '                                <th>检测车道数(个)</th>\n' +
                        '                                <td style="border: 0">' + result.daolupdzb_roadnumber + '</td>\n' +
                        '                            </tr>\n' +
                        '                        </table>\n'
                    //沥青路面病害调查表(明细)
                    tableHtml3 = '                        <table class="table-list" border rules=none cellspacing=0>\n' +
                        '                            <tr>\n' +
                        '                                <th>道路长度(m)</th>\n' +
                        '                                <td></td>\n' +
                        '                                <th>道路宽度(m)</th>\n' +
                        '                                <td></td>\n' +
                        '                                <th>检测面积(㎡)</th>\n' +
                        '                                <td>' + result.daolupdzb_detectionarea + '</td>\n' +
                        '                                <th>检测车道数(个)</th>\n' +
                        '                                <td>' + result.daolupdzb_roadnumber + '</td>\n' +
                        '                            </tr>\n' +
                        '                            <tr>\n' +
                        '                                <th>路段(个）</th>\n' +
                        '                                <td>' + result.daolupdzb_roadnumber + '</td>\n' +
                        '                                <th>合格(个）</th>\n' +
                        '                                <td>' + result.daolupdzb_qualified + '</td>\n' +
                        '                                <th>不合格(个)</th>\n' +
                        '                                <td>' + result.daolupdzb_unqualified + '</td>\n' +
                        '                                <th>合格率(%)</th>\n' +
                        '                                <td>' + result.daolupdzb_qualified / result.daolupdzb_roadnumber + '</td>\n' +
                        '\n' +
                        '                            </tr>\n' +
                        '                            <tr>\n' +
                        '                                <th>车行道完好率(%)</th>\n' +
                        '                                <td style="border: 0">' + result.daolupdzb_maintainstatus + '</td>\n' +
                        '                                <th>PCL</th>\n' +
                        '                                <td style="border: 0"></td>\n' +
                        '                                <th>PCL评价等级</th>\n' +
                        '                                <td style="border: 0"></td>\n' +
                        '                                <th>养护建议</th>\n' +
                        '                                <td style="border: 0">' + result.daolupdzb_maintenancesuggeste + '</td>\n' +
                        '                            </tr>\n' +
                        '                        </table>\n'


                } else {

                    tableHtml = '<div class="nullData">当前节点无数据</div>';
                    tableHtml2 = '<div class="nullData">当前节点无数据</div>';
                    tableHtml3 = '<div class="nullData">当前节点无数据</div>';

                }
                $('.table1').html(tableHtml);

                $('.table2').html(tableHtml2);

                $('.table3').html(tableHtml3);

                $('.table4').html(tableHtml2);

            },
            error: function (jqXHR) {
                alert("发生错误：" + jqXHR.status);
            }
        });

    }

    /**
     * 绘画列表
     */

    function refreshList(obj) {

        $.ajax({
            type: "GET",
            url: baseUrl + 'maintainjudge/main/networkingdata/getlistinfo?roadCode=' + obj,
            dataType: "json",
            async: true,

            success: function (result) {
                if (result != null || result != undefined) {
                    layer.close(loading);
                    tableFun(result);
                } else {
                    var nullHtml = '<div class="nullData">当前节点无路段明细数据</div>'
                    for (var i = 0; i < $('.listTable').length; i++) {
                        $('.listTable')[i].innerHTML = nullHtml;
                    }
                }

            },
            error: function (jqXHR) {
                alert("发生错误：" + jqXHR.status);

            }
        });

    }

    function tableFun(objData) {
        <!--路况信息评定-->

        table.render({
            elem: '#table'
            //  , url: '/demo/table/user/'
            , cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , parseData: function (res) {
                console.log(res);
                return {
                    "code": 0
                    , "msg": ""
                    , "count": 1000
                    , "data": res
                }
            }
            , cols: [[
                {field: 'fRoadSectionName', title: '路段名称'}
                , {field: 'fPileNumberStart', title: '起点桩号'}
                , {field: 'city', title: '止点桩号'}//
                , {field: 'fSectionLenth', title: '路段长度'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'experience', title: '路面类型'}//
                , {field: 'totalPointsDeducted', title: '路段总扣分'}
                , {field: 'PCI', title: '路段PCI'}
                , {field: 'wealth', title: '路面损坏评定等级', width: 150}//
                , {field: 'RQI', title: '路段RQI'}
                , {field: 'pcl', title: '行驶质量等级'}//
                , {field: 'PQI', title: 'PQI', width: 70}
                , {field: 'pcld', title: '综合评价指数PQI', width: 150}//
                , {field: 'intactRate', title: '车道完好率(%)', width: 130}//
                , {field: 'maintenanceLevel', title: '养护等级'}
                , {field: 'maintenanceSuggeste', title: '养护建议'}
                , {field: 'isintersection', title: '交叉口'}
            ]]
            , data: objData
        });

        //路况信息评定
        table.render({
            elem: '#table1'
            //, url: '/demo/table/user/'
            , cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'id', title: '路段编码'}//
                , {field: 'username', title: '路段名称'}//
                , {field: 'fPileNumberStart', title: '起点桩号'}
                , {field: 'city', title: '止点桩号'}//
                , {field: 'fSectionLenth', title: '路段长度'}
                , {field: 'experience', title: '路面宽度'}//
                , {field: 'score', title: '断面面积m2', width: 120}
                , {field: 'classify', title: '道路分类'}//
                , {field: 'IsIntersection', title: '交叉口'}
                , {field: 'wealffth', title: '总扣分'}//
                , {field: 'PCI', title: 'PCL'}
                , {field: 'RQI', title: 'RQI'}
                , {field: 'PCIGrade', title: 'PCI等级'}
                , {field: 'PCIGrade', title: 'RQI等级'}//
                , {field: 'PQI', title: 'PQI'}
                , {field: 'PQIGrade', title: 'PQI等级'}
                , {field: 'intactRate', title: '完好率'}
                , {field: 'maintenanceLevel', title: '养护状况等级'}
                , {field: 'maintenanceSuggeste', title: '养护对策'}

            ]]
            , data: objData

        });

        //车辙状况与评定
        table.render({
            elem: '#table2'
            // , url: '/demo/table/user/'
            , cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'fRailwayCode', title: '路段编码'}//
                , {field: 'fRoadSectionName', title: '路段名称'}
                , {field: 'fPileNumberStart', title: '起点桩号'}
                , {field: 'city', title: '止点桩号'}//
                , {field: 'fSectionLenth', title: '路段长度'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'experience', title: '路面类型'}//
                , {field: 'totalPointsDeducted', title: '路段总扣分'}
                , {field: 'leftRut', title: '左车辙(mm)'}
                , {field: 'rightRut', title: '右车辙(mm)'}
                , {field: 'representeRut', title: '代表车辙(mm)'}
            ]]
            , data: objData
        });

        //路面破损状况
        table.render({
            elem: '#table3'
            //  , url: '/demo/table/user/'
            , cellMinWidth: 150 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'fRoadSectionCode', title: '路段编码', width: 100}
                , {field: 'fRoadSectionName', title: '路段名称', width: 100}//
                , {field: 'fPileNumberStart', title: '起点桩号', width: 100}
                , {field: 'city', title: '止点桩号', width: 100}//
                , {field: 'fSectionLenth', title: '路段长度', width: 100}
                , {field: 'CrackLinearCrackArea', title: '裂缝/线裂/面积'}
                , {field: 'CrackLinearCrackDensity', title: '裂缝/线裂/密度'}
                , {field: 'CrackLinearCrackDeducted', title: '裂缝/线裂/扣分'}
                , {field: 'CrackRetArea', title: '裂缝/网裂/面积'}
                , {field: 'CrackRetDensity', title: '裂缝/网裂/密度'}
                , {field: 'CrackRetDeducted', title: '裂缝/网裂/扣分'}
                , {field: 'CrackFragArea', title: '裂缝/碎裂/面积'}
                , {field: 'CrackFragDensity', title: '裂缝/碎裂/密度'}
                , {field: 'CrackFragDeducted', title: '裂缝/碎裂/扣分'}
                , {field: 'DeformRutArea', title: '变形/车辙/面积'}
                , {field: 'DeformRutDeducted', title: '变形/车辙/扣分'}
                , {field: 'DeformSubsArea', title: '变形/沉陷/面积'}
                , {field: 'DeformSubsDensity', title: '变形/沉陷/密度'}
                , {field: 'DeformSubsDeducted', title: '变形/沉陷/扣分'}
                , {field: 'DeformHoldArea', title: '变形/拥包/面积'}
                , {field: 'DeformHoldDensity', title: '变形/拥包/密度'}
                , {field: 'DeformHoldDeducted', title: '变形/拥包/扣分'}
                , {field: 'LooseFlakingArea', title: '松散/剥落/面积'}
                , {field: 'LooseFlakingDensity', title: '松散/剥落/密度'}
                , {field: 'LooseFlakingDeducted', title: '松散/剥落/扣分'}
                , {field: 'LoosePotholeArea', title: '松散/坑槽/面积'}
                , {field: 'LoosePotholeDensity', title: '松散/坑槽/密度'}
                , {field: 'LoosePotholeDeducted', title: '松散/坑槽/扣分'}
                , {field: 'LooseNibArea', title: '松散/啃边/面积'}
                , {field: 'LooseNibDensity', title: '松散/啃边/密度'}
                , {field: 'LooseNibDeducted', title: '松松散/啃边/扣分'}
                , {field: 'OtherRoadDifArea', title: '松其它/路框差/面积'}
                , {field: 'OtherRoadDifDensity', title: '其它/路框差/密度'}
                , {field: 'OtherRoadDifDeducted', title: '其它/路框差/扣分'}
                , {field: 'OtherRepairArea', title: '其它/修补损坏/面积'}
                , {field: 'OtherRepairDensity', title: '其它/修补损坏/密度'}
                , {field: 'OtherRepairDeducted', title: '松其它/修补损坏/扣分'}

            ]]
            , data: objData

        });

        //路面破损状况
        table.render({
            elem: '#table4'
            // , height: 312
            , cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            // , url: '/demo/table/user/' //数据接口
            // , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: '路段编码'}//
                , {field: 'username', title: '路段名称'}//
                , {field: 'sex', title: '起点桩号'}//
                , {field: 'city', title: '止点桩号'}//
                , {field: 'sign', title: '路段长度'}//
                , {field: 'experience', title: '路段宽度'}//
                , {field: 'PCICheckArea', title: 'PCI检查面积', width: 150}
                , {field: 'CrackLinearCrackArea', title: '裂缝/线裂/面积', width: 150}
                , {field: 'crackLinearCrackArea', title: '裂缝/线裂'}
                , {field: 'crackRetArea', title: '裂缝/网裂'}
                , {field: 'crackFragArea', title: '裂缝/碎裂'}
                , {field: 'deformRutArea', title: '变形/车辙'}
                , {field: 'deformHoldArea', title: '变形/拥包'}
                , {field: 'looseFlakingArea', title: '松散/剥落'}
                , {field: 'loosePotholeArea', title: '松散/坑槽'}
                , {field: 'looseNibArea', title: '松散/啃边'}
                , {field: 'otherRoadDifArea', title: '其它/路框差'}
                , {field: 'otherRepairArea', title: '其它/修补'}
                , {field: 'IRI', title: 'IRI'}
                , {field: 'DEF', title: 'DEF'}
                , {field: 'AADT', title: 'AADT'}
                , {field: 'EASL', title: 'EASL'}

            ]]
            , data: objData

        });
        //平整度状况与评定
        table.render({
            elem: '#table5'
            // , height: 312
            , cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            //, url: '/demo/table/user/' //数据接口
            // , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: '路段编码'}//
                , {field: 'username', title: '路段名称'}//
                , {field: 'sex', title: '起点桩号'}//
                , {field: 'city', title: '止点桩号'}//
                , {field: 'sign', title: '路段长度'}//
                , {field: 'experience', title: '路面类型'}//
                , {field: 'LeftIRI', title: '左IRI(m/km)', width: 150}
                , {field: 'RightIRI', title: '右IRI(m/km)', width: 150}
                , {field: 'RepresenteIRI', title: '代表IRI(m/km)', width: 150}
                , {field: 'RQI', title: 'RQI'}
                , {field: 'wecalth', title: '行驶质量等级', width: 140}//
                , {field: 'wccealth', title: 'PQI'}//
                , {field: 'evaluate', title: '评价'}
            ]]
            , data: objData

        });
    }


    /**
     * 时间格式化
     * @param timestamp
     * @returns {string}
     */
    function formateDate(timestamp) {
        var date = new Date(timestamp);
        var y = 1900 + date.getYear();
        var m = "0" + (date.getMonth() + 1);
        var d = "0" + date.getDate();
        return y + "-" + m.substring(m.length - 2, m.length) + "-" + d.substring(d.length - 2, d.length);
    }

    /**
     * 搜索框搜索
     */
    var input = document.querySelector('input')
    input.addEventListener('change', function (params) {
        // console.log('params', params.valueOf())

        var keyWord = document.getElementsByClassName("valInput")[0].value;
        searchFun(keyWord, treeDataSearch);

    })

    function searchFun(keyWord, list) {
        var len = list.length;
        var arr = [];
        //拿到树的数据list

        for (var i = 0; i < len; i++) {
            //如果字符串中不包含目标字符会返回-1
            if (list[i].title.indexOf(keyWord) >= 0) {
                arr.push(list[i]);
            }

            //无连接线风格左树
            tree.render({
                elem: '#leftTree'
                , data: arr
                , showLine: false  //是否开启连接线
                , click: function (obj) {
                    //layer.msg(JSON.stringify(obj.data));
                    var loading = layer.load(0, {
                        shade: false,
                        time: 2 * 1000
                    });
                    //设置左树选中节点样式
                    $(obj.elem[0]).siblings().css("background-color", "transparent");
                    $(obj.elem[0]).css("background-color", "#12a9fd")
                    clickDataID = obj.data.id;
                    clickDataName = obj.data.title;
                    refreshRight(clickDataID, clickDataName);

                }

            });
        }
        return arr;
    }


});

// $('.new1').click(function () {
//     $.ajax({//异步删除文件
//         url: "../../riskcontroltrouble/getRiskcontrolTroubleById?id=" + troubleid,
//         dataType: "json",
//         success: function (data) {
//             console.log(data);
//
//             var dataHtml = "";
//             for (var i = 0; i < imglist.length; i++) {
//                 dataHtml += ''
//             }
//             $(".imgdiv1").html(dataHtml);
//
//             form.render();
//
//         }, error: function () {
//             // alert("异常！");
//         }
//     });
//
// })








